<template>
  <div class="mainContainer">
    <!-- Search start -->
    <el-form
      :inline="true"
      size="small"
      :model="queryParams"
      class="demo-form-inline searchContainer"
    >
      <el-form-item label="数据变更类型: ">
        <el-select
          v-model="queryParams.changeType"
          placeholder="数据变更类型"
          style="width:160px"
          clearable
        >
          <el-option
            v-for="item in typeList"
            :key="item.dicValue"
            :label="item.dicName"
            :value="item.dicValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期: ">
        <el-date-picker
          v-model="queryParams.startDate"
          type="date"
          placeholder="请选择开始日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="结束日期: ">
        <el-date-picker
          v-model="queryParams.endDate"
          type="date"
          placeholder="请选择结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="bs-form-btn"
          size="small"
          type="primary"
          @click="onSearch"
          ><el-icon><Search /></el-icon>查 询</el-button
        >
        
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- table-layout='auto'行,列,单元格的布局方式, 避免在不同浏览器中, 可能出现表头和内容错误, 
      但是!!!如果table存在多级表头,并且前几列还是固定在左边的时候, 千万不要使用auto,用fixed, 否则爽到你怀疑人生
    -->
    <div class="dataContainer">
      <el-table
        ref="tableRef"
        v-loading="tableLoading"
        :border="true"
         class="bs-table"
        :data="tableData"
        row-key="id"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        table-layout='auto'
      >
        <el-table-column  type="index" label="序号"  width="80"/>
        <el-table-column  prop="changeType"  label="数据变更类型"  width="120">
           <template #default="scope">
            {{ getChangeTypeText(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column  prop="changeFields" label="变更详情"   show-overflow-tooltip/>
         <el-table-column  prop="createTime"  label="创建时间"  width="180"/>
        <el-table-column  prop="changeFields" label="查看详情" >
           <template #default="scope">
            <el-button
              size="small"
              link
              type="success"
              @click="openEditModal(scope.row)"
              ><el-icon><List /></el-icon> 查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        small="small"
        disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @pagination="selectByPage"
      />
    </div>
    <el-dialog v-model="dialogVisible" title="变更详情" width="700" draggable>
      <el-table :data="detailList" :border="true" class="bs-table" style="padding: 10px;width: 90%;margin: auto;"  >
        <el-table-column prop="name" label="字段名称" width="180"/>
        <el-table-column prop="orgValue" label="变更前值" min-width="200" width="200" />
        <el-table-column prop="destValue" label="变更后值" /> 
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {selectByPage} from '@/api/system/dataChangeRecord'
import { selectDictionaryByTypeCode } from '@/api/system/dictionary'
export default {
  data(){
    return {
      tableTotal: 0,
      tableLoading: false,
      tableData: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 500,
        changeType: "",
        startDate:undefined,
        endDate:undefined
      },
      // 变更类型
      typeList:[],
      // 变更详情
      detailList:[],
      // 开关
      dialogVisible:false,
    }
  },
  created(){
    this.selectByPage()
    this.selectDictionaryByTypeCode()
  },
  methods:{
    selectDictionaryByTypeCode(){
      selectDictionaryByTypeCode({'dicTypeCode':'dataChangeType'}).then(res=>{
            if(res.code == 1) {
              this.typeList = res.data
            }
        })
    },
    async selectByPage() {
      this.tableLoading = true;
      await selectByPage(this.queryParams)
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 1) {
            this.tableData = res.data.records;
            this.tableTotal = res.data.total;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 搜索
    onSearch() {
      this.queryParams.pageNo = 1;
      this.selectByPage();
    },
    // 查看详情
    openEditModal(row){
      this.detailList = []
      this.dialogVisible = true
      if (this.isNotBlank(row.changeFields) && row.changeFields.length>2) {
        this.detailList = JSON.parse(row.changeFields)
      }
    },
    // 获取变更类型文本
    getChangeTypeText(row){
      let dic = this.typeList.find(item=>item.dicValue==row.changeType)
      if (this.isNotBlank(dic)) {
        return dic.dicName
      } else {
        return row.changeType
      }
    },
  },
}
</script>
<style scoped>
/deep/ .el-table__header, /deep/.el-table__row{
  margin: auto;
}
/deep/.el-table__body-wrapper {
  overflow-y: scroll;
}
</style>